<template>
  <div class="home">
   <van-search
      v-model="value"
      show-action
      label="商品"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" style="width:375px" alt="">
      </van-swipe-item>
    </van-swipe>
    <nav-bar />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import NavBar from '@/components/NavBar.vue'; // @ is an alias to /src
import {
  Search,
  Toast,
  Swipe,
  SwipeItem,
} from "vant";
export default defineComponent({
  components: {
    NavBar,
    [Search.name]:Search,
    [Swipe.name]:Swipe,
    [SwipeItem.name]:SwipeItem,
  },
  setup(props) {
    const state = reactive({
      value:'',
       images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
      ],
    });

    const onSearch=()=>{
        Toast('搜索中。。。。');
    }

    return {
      onSearch,
      ...toRefs(state),
    };
  },
});
</script>


<style>
.goods-card {
  margin: 0;
  background-color: @white;
}

.delete-button {
  height: 100%;
}
</style>
